<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    <meta >物种常用写法作用-->
    <title>餐饮首页</title>
    <link rel="stylesheet" href="../css/home.css">
    <!--    title的作用？非常重要 -->
</head>

<body>
<!--头部-->
<!--拿到当前div，就是拿到对象 ，css拿到对象--css选择器 建议用第三种方式，将css引入到外部文件 -->
<!--解耦-->
<!--css三种写法
1.div内  style="width: 500px;height: 500px;background-color: blue"
2.页面内<style>
    .top {
        width: 500px;
        height: 500px;
        background-color: blue
    }

</style>
3.项目内
如果三个地方都写了css，以哪一个为执行标准呢？
就近原则
-->
<div class="top">
    <!--    公司信息-->
    <div>
        <!--        让公司信息居中-->
        <div>
            <div><img src="../img/logo_g0yv.jpg"/></div>
            <div>
                <div><img src="../img/icon2_03_uc2a.png" height="30" width="30"/></div>
                <div>028-88888888</div>
            </div>
        </div>
    </div>
    <!--    导航信息-->
    <!--    背景颜色-->
    <div>
        <!--        剧中-->
        <div>
            <div>网站首页</div>
            <div>公司简介</div>
            <div>新闻介绍</div>
            <div>产品介绍</div>
            <div>在线留言</div>
            <div>联系我们</div>
        </div>
    </div>
    <!--    广告信息-->
    <div>
        <div>
            <div>品味生活·品味美食</div>
            <div>
                <div>一壶茶沏出了生活的醇美</div>
                <div>一枝花开出了生活的鲜艳</div>
                <div>一首诗吟出了生活的酸辛</div>
                <div> 一把火燃烧出了生活的激情</div>
                <div> 一枝笔绘出了人生的五彩缤纷</div>
                <div> 一首歌唱出了人生的喜怒哀惧</div>
                <div>生活像五味瓶，这么酸、这么甜这么苦、又这么辣</div>
            </div>
            <div>
                <div>
                    <div>品味</div>
                    <div>生活</div>
                    <div>品味</div>
                    <div>美食</div>
                </div>
                <div>星语餐饮给你生活指南</div>
            </div>
        </div>
    </div>
</div>
<!--中间内容-->
<div class="middle">
    <div>
        <!--        较新动态-->
        <div>
            <div class="title">较新动态</div>
            <div>
                <div><img src="../img/m331.jpg" height="190" width="268"/></div>
                <div>
                    <div>
                        <div>日本较大抹茶餐饮七叶和茶登陆上海
                        </div>
                        <div>日本较大的抹茶餐饮连锁正式登陆上海，其中
                        </div>
                    </div>
                    <div>
                        <div>日本较大抹茶餐饮七叶和茶登陆上海
                        </div>
                        <div>日本较大的抹茶餐饮连锁正式登陆上海，其中日本较大的抹茶餐饮连锁正式登陆上海，其中日本较大的抹茶餐饮连锁正式登陆上海，其中日本较大的抹茶餐饮连锁正式登陆上海，其中
                        </div>
                    </div>
                    <div>
                        <div>日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                        </div>
                        <div>日本较大的抹茶餐饮连锁正式登陆上海，其中
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div>
            <div class="title">产品展示</div>
            <div>
                <div>
                    <div><img src="../img/31_mixq.jpg" height="300" width="300"/></div>
                    <div>
                        <div>茄子茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡</div>
                        <div>茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡茄子 辣鸡</div>
                    </div>
                </div>
                <div>
                    <div><img src="../img/31_mixq.jpg" height="300" width="300"/></div>
                    <div>
                        <div>茄子</div>
                        <div>茄子 辣鸡</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<div class="foot">
    <div></div>
    <div>
        <div>
            <div>
                <div>网址: admin.com</div>
                <div>邮箱:admin@163.com联系电话: 0200000000(座机)</div>
                <div> 联系地址:四川省成都市孵化园</div>
                <div> Copyright◎2009-201 1,www.xxxxx.com,All rights rescrved</div>

            </div>
            <div>
                <img src="../img/er_06_6wce.png" height="24" width="24"/>
                <img src="../img/er_08_ejky.png" height="24" width="24"/>
                <img src="../img/er_10_85hm.png" height="24" width="24"/>
                <img src="../img/er_12_e2gr.png" height="24" width="24"/>
            </div>
        </div>
    </div>
</div>
</body>
</html>